import React from 'react';
import {
  Table,
  Button,
  Divider,
  Modal,
} from 'antd';

import DispatchingCreateForm from './CreateForm';
import DispatchingUpdateForm from './UpdateForm';

export default class Dispatching extends React.Component {
  state = {
    loading: false,
    createModalVisible: false,
    updateModalVisible: false,
    dispatchingData: [
      {
        key: 1,
        area: '杭州市',
        firstItem: 1,
        freight: 10,
        renewItem: 1,
        renewFee: 3,
      },
    ],
    handleDispatching: {},
  };

  handleDispatchingDelete = (item, e) => {
    e.preventDefault();

    Modal.confirm({
      title: '删除提示',
      content: '确定删除配送模板嘛？',
      okText: '确认',
      cancelText: '取消',
    });
  };

  handleDispatchingEdit = (item, e) => {
    e.preventDefault();

    this.setState({
      handleDispatching: item,
    });

    this.handleUpdateModalVisible(true);
  };

  handleCreateModalVisible = flag => {
    this.setState({
      createModalVisible: !!flag,
    });
  };

  handleUpdateModalVisible = flag => {
    this.setState({
      updateModalVisible: !!flag,
    });
  };

  render() {
    const { loading, createModalVisible, updateModalVisible, dispatchingData, handleDispatching } = this.state;

    const createFormProps = {
      createModalVisible,
      handleCreateModalVisible: this.handleCreateModalVisible,
    };

    const updateFormProps = {
      updateModalVisible,
      handleUpdateModalVisible: this.handleUpdateModalVisible,
      handleDispatching,
    };

    const dispatchingColumns = [
      {
        key: 'area',
        title: '可配送区域',
        dataIndex: 'area',
      },
      {
        key: 'firstItem',
        title: '首件（个）',
        dataIndex: 'firstItem',
      },
      {
        key: 'freight',
        title: '运费（元）',
        dataIndex: 'freight',
      },
      {
        key: 'renewItem',
        title: '续件（个）',
        dataIndex: 'renewItem',
      },
      {
        key: 'renewFee',
        title: '续费（元）',
        dataIndex: 'renewFee',
      },
      {
        key: 'action',
        title: '操作',
        dataIndex: 'action',
        render: (text, record) => {
          return (
            <React.Fragment>
              <a href='#' onClick={this.handleDispatchingEdit.bind(this, record)}>编辑</a>
              <Divider type='vertical' />
              <a href='#' onClick={this.handleDispatchingDelete.bind(this, record)}>删除</a>
            </React.Fragment>
          );
        },
      },
    ];

    return (
      <React.Fragment>
        <Button
          style={{ marginBottom: 16 }}
          type='primary'
          icon='plus'
          onClick={this.handleCreateModalVisible.bind(this, true)}
        >
          新建运费模板
        </Button>
        <Table
          style={{ marginBottom: 16 }}
          title={() => '按件计费'}
          loading={loading}
          bordered
          columns={dispatchingColumns}
          dataSource={dispatchingData}
        />
        <Table
          title={() => '按重量计费'}
          loading={loading}
          bordered
          columns={dispatchingColumns}
          dataSource={dispatchingData}
        />
        <DispatchingCreateForm {...createFormProps} />
        <DispatchingUpdateForm {...updateFormProps} />
      </React.Fragment>
    );
  }
}
